<template>
  <div class="vs-item sm:flex sm:flex-col">
    <h3 class="text-gray-1000 text-22 leading-7 font-semibold break-words w-full sm:flex-shrink-0">
      {{$t('vs_geography')}}
    </h3>
    <p class="text-base text-gray-1500 leading-7 mt-4 w-full sm:flex-shrink-0"
      v-if="toolsTraffic && toolsTraffic.top_country_shares && toolsTraffic.top_country_shares.length >0">
      {{$t('vs_theTop5CountriesForCertyAI',{toolName: $websiteName(toolData),countriesNum: toolsTraffic.top_country_shares ? toolsTraffic.top_country_shares.length: 0})}}{{ getGeoDesc(toolsTraffic.top_country_shares) }}
    </p>
    <div class="mt-7 w-full sm:flex-1"
      v-if="toolsTraffic && toolsTraffic.top_country_shares && toolsTraffic.top_country_shares.length >0">
      <h3 class="traffic-title text-xl">
        {{$t('vs_top5Countries',{countriesNum: toolsTraffic.top_country_shares ? toolsTraffic.top_country_shares.length: 0})}}
      </h3>
      <div class="overflow-hidden border border-gray-2000 md:rounded-lg mt-7 vs-table">
        <table class="max-w-full w-full divide-y divide-gray-2000  table-fixed">
          <tbody class="bg-white">
            <tr v-for="item in toolsTraffic.top_country_shares"
              :key="item.country">
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-base font-medium text-gray-1000 sm:pl-6 truncate"
                style="width: 40%;">
                <div class="flex items-center"
                  :title="item.two_code | fLabel(countries)">
                  <div class="flag mr-2 flex-shrink-0">
                    <img :src="getImage(item.two_code)"
                      alt=""
                      srcset=""
                      class="w-6 h-4">
                  </div>
                  <span class="flex-1 w-0 truncate">{{item.two_code | fLabel(countries)}}</span>
                </div>
              </td>
              <td class="whitespace-nowrap px-3 py-4"
                style="width: 60%;">
                <span class="text-base font-semibold text-gray-1000 max-w-full">
                  {{ Number(item.value * 100).toFixed(2) }}%
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <el-empty v-else
      class="sm:flex-1"
      :description="$t('vs_noData')"></el-empty>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'CompareVsGeography',
  props: {
    toolData: {
      type: Object | null,
      default() {
        return {}
      },
    },
    toolsTraffic: {
      type: Object | null,
      default() {
        return {}
      },
    },
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
      countries: (state) => state.countries,
    }),
  },
  filters: {
    fLabel: function (val, options) {
      let obj = options.find((item) => {
        return val.toLowerCase() === item.value.toLowerCase()
      })
      if (obj && obj.label) {
        return obj.label
      } else {
        return val
      }
    },
  },
  methods: {
    //判断是否有国旗
    getImage(name) {
      try {
        const image = require('@/static/images/flags/' + name + '.png')
        if (image) {
          return image
        } else {
          return ''
        }
      } catch (error) {
        //console.log(error)
      }
    },
    getGeoDesc(countriesArr) {
      let geoDesc = ''
      if (countriesArr) {
        countriesArr.forEach((item) => {
          geoDesc = `${geoDesc}${geoDesc ? ', ' : ''}${this.getCountryLabel(
            item.two_code
          )} ${item.value ? `${Number(item.value * 100).toFixed(2)}%` : 0}`
        })
      }
      return geoDesc
    },
    getCountryLabel(val) {
      let obj = this.countries.find((item) => {
        return (
          val && item.value && val.toLowerCase() === item.value.toLowerCase()
        )
      })
      if (obj && obj.label) {
        return obj.label
      } else {
        return val
      }
    },
  },
}
</script>
<style lang='scss' scoped>
.gap-tab {
  gap: 50px !important;
}

.vs-table {
  tr {
    &:nth-child(even) {
      background: #f8f9fb;
    }
    td:last-child {
      border-left: 1px solid #e5e5e5;
    }
  }
}

.traffic-title {
  position: relative;
  font-size: 20px;
  color: #191919;
  line-height: 24px;
  padding-left: 15px;
  &::after {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: #8333c2;
    border-radius: 1px;
  }
}
</style>